@charset "utf-8";
*{ margin: 0; padding: 0;}
@import url("animate.min.css");
.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1}
body{ overflow: hidden; font-size: 16px;}
.title{ width: 80%;}
.tc{ text-align: center;}
.box{ padding: 10px 30px; box-sizing: border-box; position: relative; text-align: center;}
.switch{ width: 36px; height: 36px; opacity: 0.8; z-index: 10; position: fixed; bottom: 20px; right: 20px; background-size: 100%;}
.switch img{-webkit-animation: rotate 1.2s linear infinite;width: 36px;height: 36px;}
.switch.on img{-webkit-animation: initial;}
.wa50{width: 50% !important;}
.wa40{width: 40% !important;}
.wa80{width: 80% !important;}
.wa70{width: 70% !important;}
.wa100{width: 100% !important;}
.mt10{ margin-top: 10px !important;}
.flex img{}
.title{ height: 100px; width: 100%; margin-top: 20px;}
.title img{}
.lady1{ float: left; position: relative; z-index: 2;}
.lady2{ float: right; position: relative; z-index: 2;}
.hd{position: fixed; text-align: center; bottom: 10px; width: 100%; z-index: 100;}
.hd a{ display: inline-block; background: #C570FF; width: 5px; height: 5px; border-radius: 50%;}
.hd a.on{ background: #3AD70F;}
.slidebox{ overflow: hidden;}
.slidebox .bd{ float: left; overflow: hidden; text-align: center; display: none; position: relative;}
.slidebox .bd img{ vertical-align: top; position: relative; z-index: 2; width: 95%;}
.slidebox .bd .cite{ width: 55%; opacity: 0;  color: #3AD70F; font-weight: bold; margin-top: 30%; margin-left: -80px; line-height: 3rem; float: left; text-align: left;  font-family: "微软雅黑";  font-size: 1rem;} 
.slidebox .bd .phone{ width: 35%; opacity: 0;  margin-top: 23%; float: right; margin-right: -80px;}
.slidebox .bd .banner{position: relative; z-index: 1;  margin: 5px auto; opacity: 0;}
.slidebox .bd .gz{ opacity: 0;}
.slidebox .bd .area2.curr .fx{ -webkit-animation: fade3  forwards; -webkit-animation-delay: 6s}

.slidebox .bd.on{ display: block;}
.slidebox .bd.on .opacity1{ -webkit-animation: wobble 1s forwards;}
.slidebox .bd.on .opacity2{ -webkit-animation: lightSpeedIn 1s forwards; -webkit-animation-delay: 1s;}
.slidebox .bd.on .opacity3{ -webkit-animation: fadeInLeft 1s forwards; -webkit-animation-delay: 2s;}

.slidebox .bd.on .opacity_long1{ -webkit-animation: fade2 1s forwards; -webkit-animation-delay: 0.5s}
.slidebox .bd.on .opacity_long2{ -webkit-animation: fade2 1s forwards; -webkit-animation-delay: 2s;}
.slidebox .bd.on .opacity_long3{ -webkit-animation: fade2 1s forwards; -webkit-animation-delay: 3.5s;}
.slidebox .bd.on .opacity_long4{ -webkit-animation: opacity 1s forwards; -webkit-animation-delay: 4.5s; margin-top: 20px;}

.slidebox .bd.on .cite{-webkit-animation: a 1s forwards; animation: a 1s forwards; -webkit-animation-delay: 1.5s;}
.slidebox .bd.on .phone{-webkit-animation: b 1s forwards; -webkit-animation-delay: 2s;}
.slidebox .bd.on .gz{font-size: 12px;  -webkit-animation:fadeInUp forwards; animation:fadeInUp forwards; -webkit-animation-delay: 3s; line-height: 22px; width: 100%; text-align: center; font-family: "微软雅黑"; color: #C570FF; margin-top: 20px;}

.slidebox .bd.on .rotate{ -webkit-animation: rotate 1s forwards; animation: fade 1s forwards;}
.slidebox .bd .logo{width: 15%; margin: 20px 0 0 20px; float: left; }
.slidebox .bd .pic1,.slidebox .bd .pic2,.slidebox .bd .pic3{width: 7%; margin: 20px 10px 0 10px; opacity: 0; display: inline-block;}
.slidebox .bd .b8{ opacity: 0; width: 55%;}
.slidebox .bd .fx{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; opacity: 0; z-index: 100;}
.slidebox .bd .fx img{float: right; opacity: 0; margin: 20px 20px 0 0; position: relative; z-index: 1000; animation: bounce 1s ease-in-out infinite; -webkit-animation: bounce 1s ease-in-out infinite;}
.slidebox .bd.last.on .fx{ animation: fade3 forwards; -webkit-animation: fade3 forwards; -webkit-animation-delay: 6s;}
.slidebox .bd.last.on .fx img{ opacity: 1;}

.ui_top{ animation: top 2s forwards; -webkit-animation: top 2s forwards; margin-top: -80px; opacity: 0;}
.ui_left{position: relative; z-index: 5 !important; opacity: 0; animation: left 1s forwards;  -webkit-animation: left 1s forwards; animation-delay: 3s; -webkit-animation-delay: 3s;}
.ui_right{position: relative; z-index: 5 !important; opacity: 0; animation: right 1s forwards; animation-delay: 4s; -webkit-animation: right 1s forwards; -webkit-animation-delay: 4s;}
.ui_fade{opacity: 0; margin-top: -20px; animation: fade2 2s forwards; animation-delay: 2s; -webkit-animation: fade2 1s forwards; -webkit-animation-delay: 2s;}
.point{ opacity: 0; width: 50px; position: fixed; z-index: 10; bottom:10%; right: 80px; animation: point 1s infinite; -webkit-animation: point 1s linear infinite; -webkit-animation-delay: 6s;}

.slidebox .bd .block{ width: 85%; opacity: 0; }
.slidebox .bd.on .block{ animation: fadeInLeft  1s forwards; animation-delay: 1s;  -webkit-animation: fadeInLeft  1s forwards; -webkit-animation-delay: 1s;}

@media only screen  and (max-height: 480px) {
	.slidebox .bd .block{ width: 85%;}
	.slidebox .bd .b8{ margin-top: -40px;}
	.slidebox .bd .phone{ margin-top: 15%;}
	.slidebox .bd .cite{ margin-top: 25%;}
}

@media only screen and (min-height: 481px) and (max-height: 569px) {
	.title{ margin-top: 30px;}

	.slidebox .bd .banner{position: relative; z-index: 1; margin: 10px 0;}
}
@media only screen and (min-height: 569px) and (max-height: 800px) {
	.title{ margin: 30px auto;}
	.slidebox .bd .banner{position: relative; z-index: 1; margin: 15px 0;}
}

@-webkit-keyframes top{
	0%{ opacity: 0; margin-top: -80px;}
	100%{ opacity: 1; margin-top: 0px;}
}

@-webkit-keyframes left{
	from{ opacity: 0; margin-left: -50px;}
	to{opacity: 1; margin-left: 0px;}
}

@-webkit-keyframes right{
	from{ opacity: 0; margin-right: -50px;}
	to{opacity: 1; margin-right: 0px;}
}

@-webkit-keyframes fade{
	0%{ opacity: 0.3; }
	100%{opacity: 1;}
}

@-webkit-keyframes fade2{
	0%{ opacity: 0; }
	100%{opacity: 1;}
}

@-webkit-keyframes fade3{
	0%{ opacity: 0; }
	100%{opacity: 0.6;}
}
@-webkit-keyframes top{
	0%{ opacity: 0; margin-top: -80px;}
	100%{ opacity: 1; margin-top: 0px;}
}

@-webkit-keyframes left{
	from{ opacity: 0; margin-left: -50px;}
	to{opacity: 1; margin-left: 0px;}
}

@-webkit-keyframes right{
	from{ opacity: 0; margin-right: -50px;}
	to{opacity: 1; margin-right: 0px;}
}


@-webkit-keyframes point{
	from{ opacity: 1; right: 80px;}
	to{opacity: 0; right: 150px;}
}

@-webkit-keyframes opacity{
	0%{ opacity: 0; margin-left: -80px;}
	100%{opacity: 1; margin-left: 0px;}
}


@-webkit-keyframes a{
	0%{ opacity: 0; margin-left: -80px;}
	100%{opacity: 1; margin-left: 5%;  color: #c570ff;}
}

@-webkit-keyframes b{
	0%{ opacity: 0; margin-right: -80px;}
	100%{opacity: 1; margin-right: 0px;}
}

@-webkit-keyframes rotate{
	0%{transform: rotate(0deg); -webkit-transform:rotate(0deg);}
	100%{transform: rotate(360deg); -webkit-transform:rotate(360deg);}
}


